import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table, Input, Button, Modal, Row, Col, message, Select, Popconfirm, Tabs, Radio, Pagination, DatePicker } from 'antd';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const RadioGroup = Radio.Group;
import styles from './index.less';
const { Option, OptGroup } = Select;
import { TimeSpan } from '../../utils';
import moment from 'moment';
const dateFormat = 'YYYY/MM/DD';
const TabPane = Tabs.TabPane;
const Pages = ({ privilege, privilege: {
    activeKey,
}, dispatch, loading }) => {
    const columns = [
        {
            title: '标题',
            dataIndex: 'title',
            width: 200,
        },
        {
            title: '内容',
            dataIndex: 'content',
            align: 'left',
        },
    ];
    const columnsTow = [
        {
            title: '标题',
            dataIndex: 'titleText',
            width: 200,
        },
        {
            title: '内容',
            dataIndex: 'message',
            align: 'left',
            width: '60%',
        },
        {
            title: '创建时间',
            dataIndex: 'creatTime',
        },
        {
            title: '发人姓名',
            dataIndex: 'userName',
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text, record) => {
                return <a onClick={() => {
                    localStorage.setItem("id", record.id);
                    dispatch({ type: 'app/goToPath', payload: 'Privilege_management_list' });
                }}>详情</a>;
            },
        },
    ];
    return (
        <div className={styles.container}>
            {/* <Tabs defaultActiveKey="1" onChange={(key)=>{
                dispatch({type:'privilege/save',payload:{activeKey:key}})
            }}>
                <TabPane tab="通知" key="1">
                    {activeKey == '1' && <PagesGET dispatch={dispatch} {...privilege} loading={loading.global}/>}
                </TabPane>
                <TabPane tab="公告" key="2">
                    {activeKey == '2' && <PagesGETTow dispatch={dispatch} {...privilege} loading={loading.global}/>}
                </TabPane>
            </Tabs> */}
            <PagesGETTow dispatch={dispatch} {...privilege} loading={loading.global} />
            <Table
                columns={activeKey == '1' ? columns : columnsTow}
                rowKey={id => id.content ? id.content : id.id}
                pagination={false}
                loading={loading.global}
                size="small"
                dataSource={privilege.getPrivilegeData || null} />
            <Pagination current={privilege.pages} showTotal={total => `共计 ${total} 条`}
                style={{ float: 'right', margin: 10 }} size="small" total={privilege.total}
                onChange={pages => { !loading.global && dispatch({ type: 'privilege/save', payload: { pages: pages } }); }} />
        </div>
    );
};

class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            title: '',
            titleAdd: '',
            content: '',
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({
            type: "privilege/getPrivilege", payload: {
                title: '',
                pageNumber: 1,
                pageSize: 10,
            },
        });
    }

    render () {

        let { pages, record, view, dispatch, loading, tabsNum, selectedRowKeys } = this.props;
        return (
            <div className={styles.containerit}>
                <Input value={this.state.title} placeholder="标题" style={{ margin: 10, width: 200 }}
                    onChange={e => this.setState({ title: e.target.value })} />
                <Button style={{ marginLeft: 10 }} type='primary' onClick={() => {
                    let { title } = this.state;
                    this.props.dispatch({
                        type: "privilege/getPrivilege", payload: {
                            title: title,
                            pageNumber: pages,
                            pageSize: 10,
                        },
                    });
                }}>查询</Button>
                <Button style={{ marginLeft: 10 }} type='primary' onClick={() => {
                    this.props.dispatch({ type: "privilege/save", payload: { view: true } });
                    this.setState({
                        titleAdd: '',
                        content: '',
                    });
                }}>下发通知</Button>
                <Modal
                    title='下发通知'
                    width={600}
                    visible={view}
                    confirmLoading={loading}
                    onOk={() => {
                        let { titleAdd, content } = this.state;
                        if (titleAdd && titleAdd) {
                            let body = {
                                title: titleAdd,
                                content: content,
                            };
                            dispatch({ type: "privilege/postPrivilege", payload: body });
                        } else {
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={() => {
                        dispatch({ type: "privilege/save", payload: { view: false } });
                    }}>
                    <Row>
                        <Col span={6}><span><span style={{ color: 'red', marginLeft: 50 }}>*</span>标题:</span></Col>
                        <Col span={14}>
                            <Input style={{ width: 340, marginBottom: 10, marginTop: -4 }}
                                onChange={e => this.setState({ titleAdd: e.target.value })}
                                value={this.state.titleAdd}
                                placeholder="请输入标题" />
                        </Col>
                        <Col span={6}><span><span style={{ color: 'red', marginLeft: 50 }}>*</span>内容:</span></Col>
                        <Col span={14}>
                            <Input.TextArea rows={8} style={{ width: 340, marginBottom: 10, marginTop: -4 }}
                                onChange={e => this.setState({ content: e.target.value })}
                                value={this.state.content}
                                placeholder="请输入内容" />
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.pages !== this.props.pages) {
            // if(nextProps.pages == 1 && this.props.pages == 0){return;}
            let { title } = this.state;
            this.props.dispatch({
                type: "privilege/getPrivilege", payload: {
                    title: title,
                    pageNumber: nextProps.pages == 0 ? 1 : nextProps.pages,
                    pageSize: 10,
                },
            });
        }
    }
}


class PagesGETTow extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            title: '',
            titleAdd: '',
            content: '',
            time: [],
            groupIds: [],
            isSendAll: '',
            subscribedUserIds: [],
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({ type: "privilege/getAllRole" });//获取通讯录和角色
        this.props.dispatch({
            type: "privilege/getPrivilegeTow", payload: {
                titleText: '',
                startTime: "",
                endTime: "",
                pageNumber: 1,
                pageSize: 10,
            },
        });
    }

    render () {

        let { pages, getBMZZData, view, dispatch, loading, tabsNum, getMaillist } = this.props;
        let { time, subscribedUserIds, isSendAll } = this.state;
        return (
            <div className={styles.containerit}>
                <Input value={this.state.title} placeholder="标题" style={{ margin: 10, width: 200 }}
                    onChange={e => this.setState({ title: e.target.value })} />
                <RangePicker value={time[0] ? [moment(time[0], dateFormat), moment(time[1], dateFormat)] : []} style={{ margin: 10 }}
                    onChange={(date, dateString) => {
                        this.setState({
                            time: dateString,
                        });
                    }} />
                <Button style={{ marginLeft: 10 }} type='primary' onClick={() => {
                    let { title } = this.state;
                    this.props.dispatch({
                        type: "privilege/getPrivilegeTow", payload: {
                            titleText: title,
                            startTime: time[0],
                            endTime: time[1],
                            pageNumber: pages,
                            pageSize: 10,
                        },
                    });
                }}>查询</Button>
                <Button style={{ margin: 10 }} onClick={() => {
                    this.setState({
                        title: '',
                        time: [],
                    });
                }}>重置</Button>
                <Button style={{ marginLeft: 10 }} type='primary' onClick={() => {
                    this.props.dispatch({ type: "privilege/save", payload: { view: true } });
                    this.setState({
                        titleAdd: '',
                        content: '',
                        isSendAll: true,
                        groupIds: [],
                        subscribedUserIds: [],
                    });
                }}>创建公告</Button>
                <Modal
                    title='下发通知'
                    width={600}
                    visible={view}
                    confirmLoading={loading}
                    onOk={() => {
                        let { titleAdd, content, isSendAll, groupIds, subscribedUserIds } = this.state;
                        if (titleAdd && titleAdd) {
                            let body = {
                                title: titleAdd,
                                message: content,
                                // isSendAll:isSendAll,
                                groupIds: groupIds,
                                subscribedUserIds: subscribedUserIds,
                            };
                            dispatch({ type: "privilege/postPrivilegeTow", payload: body });
                        } else {
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={() => {
                        dispatch({ type: "privilege/save", payload: { view: false } });
                    }}>
                    <RadioGroup style={{ margin: 20, marginLeft: 50 }} onChange={(e) => {
                        this.setState({
                            isSendAll: e.target.value,
                        });
                    }} value={this.state.isSendAll}>
                        <Radio value={true}>全员发送</Radio>
                        <Radio value={false}>根据角色或人员发送</Radio>
                    </RadioGroup>
                    <Row>
                        <Col span={6}><span><span style={{ color: 'red', marginLeft: 50 }}>*</span>公告标题:</span></Col>
                        <Col span={14}>
                            <Input style={{ width: 340, marginBottom: 10, marginTop: -4 }}
                                onChange={e => this.setState({ titleAdd: e.target.value })}
                                value={this.state.titleAdd}
                                placeholder="请输入标题" />
                        </Col>
                        <Col span={6}><span><span style={{ color: 'red', marginLeft: 50 }}>*</span>公告内容:</span></Col>
                        <Col span={14}>
                            <Input.TextArea rows={6} style={{ width: 340, marginBottom: 10, marginTop: -4 }}
                                onChange={e => this.setState({ content: e.target.value })}
                                value={this.state.content}
                                placeholder="请输入内容" />
                        </Col>
                        {!isSendAll && <Col span={6}><span><span style={{ color: 'red', marginLeft: 50 }}>*</span>公告接收人:</span></Col>}
                        {!isSendAll && <Col span={14}>
                            <Select value={subscribedUserIds[0] ? subscribedUserIds : undefined} style={{ marginBottom: 10, marginTop: -4, width: 300 }}
                                mode="multiple"
                                placeholder="请选择"
                                onChange={value => {
                                    this.setState({
                                        subscribedUserIds: value,
                                    });
                                }}>
                                {getMaillist && getMaillist.map(item => {
                                    return <Option key={item.id} value={item.id}>{item.name}</Option>;
                                })}
                            </Select>
                        </Col>}
                        {!isSendAll && <Col span={6}><span><span style={{ color: 'red', marginLeft: 50 }}>*</span>公告接收角色:</span></Col>}
                        {!isSendAll && <Col span={14}>
                            <Select value={this.state.groupIds}
                                placeholder="请选择" style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                mode="multiple" onChange={value => {
                                    this.setState({
                                        groupIds: value,
                                    });
                                }}>
                                {
                                    getBMZZData && this.menuTreeOneFunRole(getBMZZData)
                                }
                            </Select>
                        </Col>}
                    </Row>
                </Modal>
            </div>
        );
    }
    //角色树
    menuTreeOneFunRole (arr) {
        return arr.map(item => {
            if ((item.orgList && item.orgList.length > 0) || (item.roleList && item.roleList.length > 0)) {
                return <OptGroup key={item.id} label={item.s_name}>
                    {this.menuTreeOneFunRole(item.roleList)}{this.menuTreeOneFunRole(item.orgList)}
                </OptGroup>;
            }
            return <Option disabled={item.rolr_name ? false : true}
                key={item.id} value={item.id}>{item.s_name || item.rolr_name}</Option>;
        });
    }
    componentWillReceiveProps (nextProps) {
        if (nextProps.pages !== this.props.pages) {
            // if(nextProps.pages == 1 && this.props.pages == 0){return;}
            let { title, time } = this.state;
            this.props.dispatch({
                type: "privilege/getPrivilegeTow", payload: {
                    titleText: title,
                    startTime: time[0],
                    endTime: time[1],
                    pageNumber: nextProps.pages == 0 ? 1 : nextProps.pages,
                    pageSize: 10,
                },
            });
        }
    }
}

Pages.propTypes = {
    privilege: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ privilege, loading }) => ({ privilege, loading }))(Pages);
